<template>
    <div>
        <ModalComponent @open="handleOpen" modal-name="admission-ticket-modal" title="准考证管理" :close-on-click-modal="false"
            size="1024px" type="drawer">
            <div style="padding-bottom: 16px;">
                <el-text class="mx-1" size="large">赛项：{{ info.name }}({{ info.playingTime
                }})</el-text>
            </div>
            <div class="head-btns">
                <el-space>
                    <el-button @click="handleGenerateExamAttendance" type="warning">一键为学生生成准考证并分配考场</el-button>
                    <el-button @click="handleRestAchievement" type="danger">重置成绩</el-button>
                    <el-button @click="handleAllocationExamRoom" type="danger">分配到指定赛项考场</el-button>
                    <el-button @click="handleExportData">导出到表格</el-button>
                </el-space>
                <el-space>
                    <el-input v-model="query_data.studentName" placeholder="学生姓名"></el-input>
                    <!-- <el-input v-model="query_data.documentNumber" placeholder="准考证号"></el-input> -->
                    <el-button @click="handleLoad(true)" type="primary">搜索</el-button>
                </el-space>
            </div>
            <div>
                <el-table v-loading="loading" empty-text="暂无数据..." :data="tableData" border style="width: 100%">
                    <el-table-column label="学生ID" prop="studentId" width="100" />
                    <el-table-column label="学生姓名" prop="studentName" />
                    <el-table-column label="机构名称" prop="informationName" />
                    <el-table-column label="证件号码" prop="documentNumber" />
                    <el-table-column label="考场" prop="examinationName">
                        <template #default="scope">
                            {{ scope.row.examinationName ?? '暂未分配' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="账号" prop="examNumber" />
                    <el-table-column label="密码" prop="password" />
                    <el-table-column label="客观题" prop="selectScore" />
                    <el-table-column label="主观题" prop="subjectivityScore" />
                    <el-table-column label="考试时长" prop="examTime" />
                    <el-table-column label="操作" prop="Address" width="100">
                        <template #default="scope">
                            <el-dropdown trigger="click" @command="(value) => handleOperate(value, scope.row)">
                                <span class="el_dropdown_link">
                                    操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <!-- <el-dropdown-item :icon="Edit" command="edit"> 编辑 </el-dropdown-item> -->
                                        <el-dropdown-item command="look"> 查看准考证图片 </el-dropdown-item>
                                        <el-dropdown-item command="select" :disabled="scope.row.readOverState!=2" :title="scope.readOverState!=2?'暂无成绩':''" > 查看得分情况 </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </template>

                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background layout="prev, pager, next, total" :total="total"
                        @current-change="handlePage" />
                </div>
            </div>
            <AdmissionTicketInfoModal />
            <OneTouchCreateModal @create="handleGenerateExamAttendanceConfirm" />
        </ModalComponent>
        <ScorListModal />
        <WwitchEventExaminationVenuesModal @update="handleLoad"/>
    </div>
</template>
<script setup >
import { onMounted, ref } from 'vue'
import ModalComponent from "@/components/modal/index.vue"
import { usePage } from "@/hooks/usePage"
import { GetExamAttendancePageList, GenerateExamAttendance, GetExamAttendanceList, clearAllScore } from '@/api/gradingTeacher';
import { ElMessage, ElMessageBox } from 'element-plus';
import AdmissionTicketInfoModal from "@/components/admission-ticket-info-modal/index.vue"
import OneTouchCreateModal from "./one-touch-create-modal.vue"
import { close, open } from '@/utils/modal';
import { exportXlsx } from '@/utils/xlsx';
import ScorListModal from "@/components/score-list-modal/score-list-modal.vue"
import WwitchEventExaminationVenuesModal from "./switch-event-examination-venues.vue"

// 表格数据
const {
    total: total,
    data: tableData,
    query_data,
    loading,
    handleLoad,
    handlePage
} = usePage({
    api_fn: GetExamAttendancePageList,
    q_data: {
        eventId: '',
        studentName: "",
        documentNumber: ""
    }
})

const info = ref({})
const handleOpen = (item) => {
    console.log(item);
    info.value = item;
    query_data.value.eventId = item.eventId
    handleLoad(true);
}

const handleOperate = (command, row) => {
    if (command == 'look') {
        // TODO 查看准考证 表格展示 可下载图片
        handleOpenInfoModal({
            ...row,
            eventId: query_data.value.eventId
        });
    } else if (command == 'select') {
        handleOpenScoreModal(row)
    }
}
/**
 * 获取得分情况列表
 */
const handleOpenScoreModal = async (row) => {
    open('score-list-modal', row)
}
const handleOpenInfoModal = (data) => {
    open('admission-ticket-info', data)
}

const handleGenerateExamAttendance = async () => {
    open("one-touch-create-modal")
}
const handleGenerateExamAttendanceConfirm = async (data) => {
    close("one-touch-create-modal")

    let res = await GenerateExamAttendance({
        eventId: query_data.value.eventId,
        ...data
    });
    if (!res.success) {
        ElMessage.error(res.message);
    } else {
        ElMessage.success(res.message);
        handleLoad(true)
    }
}

const handleRestAchievement = () => {
    ElMessageBox.confirm('确定重置学生的考试成绩？', "提示", {
        "cancel-button-text": "取消",
        "confirm-button-text": "确定",
        type: "warning"
    }).then(async () => {
        // TODO 重置考试成绩
        let res = await clearAllScore({
            eventId: query_data.value.eventId
        })
        if (!res.success) {
            ElMessage.error(res.message);
        } else {
            ElMessage.success(res.message);
            handleLoad(true)
        }
    })
}
/**
 * 导出到表格
 */
const handleExportData = async () => {
    let res = await GetExamAttendanceList({
        eventId: query_data.value.eventId
    })
    if (!res.success) {
        ElMessage.error(res.message);
        return;
    }
    let entityListData = res.entityList.map((item) => {
        return {
            "学生ID": item.esId,
            "学生姓名": item.studentName,
            "机构名称": item.informationName,
            "考场名": item.examNumber,
            "准考证号": item.documentNumber,
            "密码": item.password,
            "客观题": item.selectScore ?? 0,
            "主观题": item.subjectivityScore ?? 0,
            "考试时长": item.examTime ?? 0,
            "总分": (item.selectScore ?? 0) + (item.subjectivityScore ?? 0)
        }
    });
    exportXlsx(`${info.value.name}-${info.value.playingTime}-准考证导出表格`, entityListData)
}

/**
 * 分配到指定赛项考场
 */
const handleAllocationExamRoom = () => {
    open("switch-event-examination-venues", {
        eventId: query_data.value.eventId
    })
}

onMounted(() => {
    console.log('mounted!')
})
</script>
<style lang="scss" scoped>
.el-drawer__header {
    margin: 0;
}

.head-btns {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
}
</style>